<template>
  <el-menu
    id="menu"
    class="el-menu-vertical-demo"
    background-color="#304156"
    text-color="#BFCBD9"
    active-text-color="#ffd04b"
    :router="true"
  >
    <!-- 学生管理 -->
    <el-submenu class="submenu"  index="1">
      <template slot="title">
        <span class="span">首页</span>
      </template>
    </el-submenu>
    <el-submenu class="submenu" v-for="item in goodsListData" :key="item.index" :index="item.index">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        v-for="ListedItem in item.list"
        :key="ListedItem.index"
        :index="ListedItem.index"
        >{{ ListedItem.title }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
        // 导航栏数据
      goodsListData: [   
        {
          index: '2',
          title: "产品管理",
          list: [
            { index: '2 - 1', title: "定期管理" },
            { index: '2 - 2', title: "活期管理" },
            { index: '2 - 3', title: "黄金管理" },
            { index: '2 - 4', title: "基金管理" },
            { index: '/home/bankmanagement', title: "银行管理" },
            { index: '2 - 6', title: "基金经理管理" },
            { index: '2 - 7', title: "在线人数" },
          ],
        },
        { 
          index: '3',
          title: "设置",
          list: [
            { index: '3 - 1', title: "员工管理" },
            { index: '3 - 2', title: "角色管理" },
            { index: '/home/appCode', title: "APPcode值修改" },
            { index: '3 - 4', title: "优惠券管理" },
          ],
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.submenu{
    width: 180px;
}
.span{
    color: #409EFF;
}
</style>